<template>
	<el-row class="container">
		<el-col :span="24" class="header">
			<el-col :span="10" class="logo" :class="collapsed?'logo-collapse-width':'logo-width'" >
				<div class="logo-img">
					<img src="../assets/images/icon.png" alt="">
					<h1 v-if="!collapsed">壹脉总后台</h1>
				</div>
			</el-col>

			<el-col :span="10">
				<div class="tools" @click.prevent="collapse">
					<i class="fa fa-align-justify"></i>
				</div>
			</el-col>
			<el-col :span="4" class="userinfo">
				<el-dropdown trigger="hover">
					<span class="el-dropdown-link userinfo-inner"><img :src="this.sysUserAvatar" /> {{sysUserName}}</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</el-col>
		</el-col>
		<el-col :span="24" class="main">
			<aside :class="collapsed?'menu-collapsed':'menu-expanded'">
				<!--导航菜单-->
				<el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" @select="handleselect"
					 unique-opened router v-show="!collapsed">
					<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
						<el-submenu :index="index+''" v-if="!item.leaf&& (item.path == '/' || menusPath.includes(item.path))">
							<template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
							<el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden&&menusPath.includes(child.path)">{{child.name}}</el-menu-item>
						</el-submenu>
						<el-menu-item v-if="item.leaf&&item.children.length>0 && menusPath.includes(item.children[0].path)" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
					</template>
				</el-menu>
				<!--导航菜单-折叠后-->
				<ul class="el-menu el-menu-vertical-demo collapsed" v-show="collapsed" ref="menuCollapsed">
					<li v-for="(item,index) in $router.options.routes" v-if="!item.hidden" class="el-submenu item" :key="index">
						<template v-if="!item.leaf">
							<div class="el-submenu__title" style="padding-left: 20px;" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)"><i :class="item.iconCls"></i></div>
							<ul class="el-menu submenu" :class="'submenu-hook-'+index" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)"> 
								<li v-for="child in item.children" v-if="!child.hidden" :key="child.path" class="el-menu-item" style="padding-left: 40px;" :class="$route.path==child.path?'is-active':''" @click="$router.push(child.path)">{{child.name}}</li>
							</ul>
						</template>
						<template v-else>
							<li class="el-submenu">
								<div class="el-submenu__title el-menu-item" style="padding-left: 20px;height: 56px;line-height: 56px;padding: 0 20px;" :class="$route.path==item.children[0].path?'is-active':''" @click="$router.push(item.children[0].path)"><i :class="item.iconCls"></i></div>
							</li>
						</template>
					</li>
				</ul>
			</aside>
			<section class="content-container">
				<div class="grid-content bg-purple-light">
					<el-col :span="24" class="breadcrumb-container">
						<div class="title">{{$route.name}}</div>
						<el-breadcrumb separator="/" class="breadcrumb-inner">
							<el-breadcrumb-item v-for="item in $route.matched" :key="item.path">
								{{ item.name }}
							</el-breadcrumb-item>
						</el-breadcrumb>
					</el-col>
					<el-col :span="24" class="content-wrapper">
						<transition name="fade" mode="out-in">
							<router-view></router-view>
						</transition>
					</el-col>
				</div>
			</section>
		</el-col>
	</el-row>
</template>

<script>
import { getLocalStorage, removeCookie, removeLocalStorage } from '@/utils/util.js'
export default {
	data() {
		return {
			collapsed:false,
			sysUserName: '',
			sysUserAvatar: '',
			form: {
				name: '',
				region: '',
				date1: '',
				date2: '',
				delivery: false,
				type: [],
				resource: '',
				desc: ''
			},
			menusPath:[],
		}
	},
	methods: {
		onSubmit() {
		},
		handleopen() {
		},
		handleclose() {
		},
		handleselect: function (a, b) {
		},
		//退出登录
		logout: function () {
			var _this = this;
			this.$confirm('确认退出吗?', '提示', {
				//type: 'warning'
			}).then(() => {
				removeLocalStorage('user');
				removeCookie('token');
				_this.$router.push('/login');
			}).catch(() => {

			});


		},
		//折叠导航栏
		collapse:function(){
			this.collapsed=!this.collapsed;
		},
		showMenu(i,status){
			this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-'+i)[0].style.display=status?'block':'none';
		},
		getAllPath(arr=[]){
			return arr.map(val=>{
				if (val.menuModelList && val.menuModelList.length) {
					 this.getAllPath(val.menuModelList)
				}
				this.menusPath.push(val.page);
			});
		},
	},
	mounted() {
		var user = getLocalStorage('user');
		if (user) {
			user = JSON.parse(user);
			this.sysUserName = user.companyName || '';
			this.sysUserAvatar = user.companyLogo || 'https://you-one-stand.oss-cn-shanghai.aliyuncs.com//one-www/photo/20190516/1557976316588.png';
		}
		this.getAllPath(user.list)
	}
}

</script>

<style scoped lang="scss">
@import '~scss_vars';
.container {
	position: absolute;
	top: 0px;
	bottom: 0px;
	width: 100%;
	.header {
		height: 60px;
		line-height: 60px;
		background: $color-primary;
		color:#fff;
		border-bottom: 1px solid #ddd;
		.userinfo {
			text-align: right;
			padding-right: 35px;
			float: right;
			.userinfo-inner {
				cursor: pointer;
				color:#000;
				opacity: 0.7;
				img {
					width: 40px;
					height: 40px;
					border-radius: 20px;
					margin: 10px 0px 10px 10px;
					float: right;
				}
			}
		}
		.logo {
			//width:230px;
			height:60px;
			font-size: 22px;
			padding-left:20px;
			padding-right:20px;
			border-color: rgba(238,241,146,0.3);
			border-right-width: 1px;
			border-right-style: solid;
			.logo-img{
				height: 45px;
				img{
					width: 30px;
					height: 30px;
					position: relative;
					top: 8px;
				}
				h1{
					font-size: 18px;
					color: #51CDCB;
					cursor: pointer;
					font-family: "Microsoft YaHei UI";
					display: inline-block;
					line-height: 30px;
					margin: 0;
					margin-left: 6px;
				}
			}
		}
		.logo-width{
			width:230px;
		}
		.logo-collapse-width{
			width:60px
		}
		.tools{
			padding: 0px 23px;
			width:14px;
			height: 60px;
			line-height: 60px;
			cursor: pointer;
			color: #000;
			opacity: 0.7;
		}
	}
	.main {
		display: flex;
		// background: #324057;
		position: absolute;
		top: 60px;
		bottom: 0px;
		overflow: hidden;
		aside {
			flex:0 0 230px;
			width: 230px;
			// position: absolute;
			// top: 0px;
			// bottom: 0px;
			.el-menu{
				height: 100%;
			}
			.collapsed{
				width:60px;
				.item{
					position: relative;
				}
				.submenu{
					position:absolute;
					top:0px;
					left:60px;
					z-index:99999;
					height:auto;
					display:none;
				}

			}
		}
		.menu-collapsed{
			flex:0 0 60px;
			width: 60px;
			.el-menu-vertical-demo{
				background: #fff;
			}
		}
		.menu-expanded{
			flex:0 0 230px;
			width: 230px;
			.el-menu-vertical-demo{
				width: 100%!important;
				background: #fff;
			}
		}
		.content-container {
			background-color: #f6f9fa;
			flex:1;
			// position: absolute;
			// right: 0px;
			// top: 0px;
			// bottom: 0px;
			// left: 230px;
			overflow-y: scroll;
			padding: 20px;
			.breadcrumb-container {
				//margin-bottom: 15px;
				.title {
					color: #51CDCB;
					font-size: 21px;
				}
				.breadcrumb-inner {
					margin-top: 10px;
				}
			}
			.content-wrapper {
				box-sizing: border-box;
				padding: 10px;
				min-height: calc(100vh - 150px);
				// background: #fff;
			}
		}
	}
	.el-menu-item.is-active{
		color: #51cdcb!important;
	}
}
</style>